<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ include file="/common/base.jsp"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<base href="<%=basePath%>">

<title>家庭参合缴费</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
	content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="renderer" content="webkit">
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="css/admin.css">
<script src="js/jquery-1.4.4.min.js"></script>
<script src="js/admin.js"></script>

<!-- <style type="text/css">
.box{/*先制作一个盒子，然后搞一个边框能和上面的重叠，然后覆盖上去*/
			width: 698px;
			height: 28px;
			background: #fff;
			font-size: 14px;/*字体大小*/
			text-align: center;/*水平居中*/
			line-height: 20px;/*行高，上下居中*/
			border: 1px solid #C3c3c3;/*给盒子边框加上与表格相同的实线*/
			position: absolute;/*绝对定位于表格*/
			left: 340px;/*覆盖边框*/
		}
th {
    border: 2px solid #C3c3c3;
}
td {
    border: 2px solid #C3c3c3;
}
</style> -->

</head>
<body>
	<form method="post" action="" id="listform">
		<div class="panel admin-panel">
			<div class="panel-head">
				<strong class="icon-reorder">家庭参合缴费</strong>
			</div>
			<div class="padding border-bottom">
				<ul class="search" style="padding-left:10px;">
					<!-- <li>搜索：</li>
					<li><input type="text" placeholder="请输入搜索关键字"
						name="familyholdername" class="input"
						style="width:250px; line-height:17px;display:inline-block" /> <a
						href="javascript:void(0)" class="button border-main icon-search"
						onclick="changesearch();"> 搜索</a></li> -->
					<%-- <li><a class="button border-main"
						href="<%=path%>/system/MoneyServlet?m=add"><span
							class="icon-plus-square-o"></span> 参合登记</a></li> --%>
							
					
					<li style="float:right"><a class="button border-main" href="<%=path%>/system/MoneyServlet?m=export">
							<span class="icon-upload"></span> 导出</a></li>
							<li style="float:right"><button class="button border-main" onclick="save()"><span
							class="icon-plus-square-o"></span> 参合登记</button></li>
					<li><a class="button border-main" href="<%=path%>/page/money/alread_join_list.jsp"><span
							class="icon-edit"></span> 缴费信息</a></li>
							<li class="search" style="padding-left:10px;">
					<li>当年缴费标准：￥：${amount}元<input type="hidden" name="amount"
						id="amount" value="${amount}" /></li>
					<li id="payCost" name="payCost"></li>
				</ul>
			</div>
			<input type="hidden" id="jsonString" name="jsonString" value=""></input>
			<input type="hidden" value="<%=session.getAttribute("userid").toString()%>" name="operator" id="operator"></input>
			<table class="table table-hover text-center" style="border: 1px solid #C3c3c3;">
				<caption align="top" style="margin-top:20px;font-size:20px;">家庭参合缴费</caption>
				<!-- <div class="box">参合人员信息</div> -->
				<tr>
					<!-- <th width="50">序号</th> -->
					<th width="50" style="text-align:center;height:60px;">&nbsp;</th>
					<th>姓名</th>
					<th>参合证号</th>
					<th>与户主关系</th>
					<th>身份证号</th>
					<th>性别</th>
					<!-- <th>操作</th> -->
				</tr>
				<!-- 遍历循环后台传来的数据 -->
				<c:forEach items="${model}" var="model">
					<tr>
						<td><input type="checkbox" value="${model.familycode}"
							name="perscodes" onclick="caculate();" /></td>
						<td name="name">${model.name}</td>
						<td name="cmscode">${model.cmscode}</td>
						<td name="relative">${model.relative}</td>
						<td name="idcard">${model.idcard}</td>
						<td name="sex">${model.sex}</td>
						<%-- <td><div class="button-group">			
							<a class="button border-main"
										href="<%=path%>/system/MoneyServlet?m=edit&name=${model.name}"><span
										class="icon-edit"></span> 参合信息</a> 
							<a class="button border-main"
								href="<%=path%>/system/MoneyServlet?m=export&name=${model.name}"><span
								class="icon-edit"></span> 导出参合信息</a>
						</div></td> --%>
					</tr>

				</c:forEach>
				<%-- <% } %> --%>
			</table>
	</form>
<script type="text/javascript">
function changesearch(){
	var url = '<%=path%>/system/MoneyServlet?m=find';
	// 替换form表单需要提交的url
	$('#listform').attr('action',url);
	// 提交form表单
	$('#listform').submit();
}

//页面计算缴费总额
function caculate(){
	var amount=$("#amount").val();
	var size=$('input:checkbox[name=perscodes]:checked').length;
	var sum=size*amount;
	$("#payCost").html("本次缴费："+sum+"元");


	var selectedData=[];
	 $("input:checkbox[name=perscodes]:checked").each(function(){
		//获取该节点最近的一个tr
	     var tr = $(this).closest("tr");
	    //获取当前行的各个列的数据,eq()的下标索引从0开始。
	     var name = $(tr).find("[name='name']").html();
	     var cmscode= $(tr).find("[name='cmscode']").html();
	     //将数据装成对象数组
	     selectedData.push({name:name,cmscode:cmscode});
	 });
	//将数据封装成JSON使用ajax传到后台
	var dat = JSON.stringify(selectedData);
	 $("#jsonString").val(dat);
}

function save() {
	var choice=document.getElementById("jsonString").value;
	var amount=document.getElementById("amount").value;
	var operator=document.getElementById("operator").value;
	$.ajax({
		type:"POST",
		data : {"chioce":choice,"amount":amount,"operator":operator},
		dataType: "json",
		url: '<%=path%>/system/MoneyServlet?m=add',
		success: function(data){
			alert(data);
		},
		error:function (){  
		     alert("wrong");  
		}  
	});
}
</script>
</body>
</html>
